<template>
  <div>
    <div class="main_operation">
      <div class="operation_left">
        <!-- <a-button class="mr10" type="primary" @click="addBtn">添加</a-button> -->
        <!-- <a-button class="mr10" type="danger">批量删除</a-button> -->
      </div>
      <div class="operation_right">
        <a-input-search placeholder="请输入触发器名称" @search="onSearch" enterButton="查询" />
      </div>
    </div>
    <div class="main">
      <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id"
        :scroll="{x: 1500, y: 500 }">
        <div slot="action" slot-scope="text, record">
          <a-button v-if="routerShow($route,'bulletinTrigger_update')" size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
          <a-button v-if="routerShow($route,'bulletinTrigger_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
        </div>
      </a-table>
      <div class="pageBox">
        <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
          :defaultCurrent="1" @change="pageChange" />
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  export default {
    name: "Trigger",
    data() {
      return {
        /* 通用模块 */
        //列表
        tableLoad: false, //列表loading状态
        formList: { //列表信息
          page: 1
        },
        selectedRowKeys: [], //勾选的id
        /* 通用模块end */
      }
    },
    computed: {
      ...mapState({
        Fields: state => state.briefingTrigger.Fields,
        dataLists: state => state.briefingTrigger.dataLists,
        requestCode: state => state.briefingTrigger.requestCode,
      }),
    },
    mounted() {
      this.changeData()
    },
    methods: {
      /* 通用模块 */
      /* 接口 */
      ...mapActions({
        getLists: 'briefingTrigger/getLists', //列表
        dataAdd: 'briefingTrigger/dataAdd', //添加
        dataEdit: 'briefingTrigger/dataEdit', //编辑
        dataDel: 'briefingTrigger/dataDel', //删除
      }),
      // 勾选
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys
      },
      // 重新获取列表数据
      changeData() {
        this.tableLoad = true
        setTimeout(() => {
          this.getLists(this.formList)
          this.tableLoad = false
        }, 800);
      },
      //搜索
      onSearch(val) {
        this.formList = { //列表信息
          name: val,
          page: 1
        }
        this.changeData()
      },
      // 页码
      pageChange(page) {
        this.formList.page = page;
        this.getLists(this.formList)
      },
      /* 通用模块end */
      /* 删除 */
      delBtn(item) {
        let _this = this
        this.$confirm({
          title: `您确定要删除 ${item.name} 吗?`,
          content: `删除后将不可恢复,请仔细核对!`,
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.dataDel(item.id)
            _this.changeData()
          },
        });
      },
      //添加跳转
      addBtn() {
        this.$router.push({
          path: '/briefing/AddTrigger',
        })
      },
      // 编辑跳转
      editBtn(item) {
        this.$router.push({
          path: `/briefing/editTrigger/${item.id}`,
        })
      },
    }
  }
</script>

<style scoped>

</style>
